This post was originally published in 2010
The tips and techniques explained may be outdated.
The Internet world exploded with the news of the Apple tablet launch last week. Named the iPad, it’s set to bring yet another revolution to the way people access and browse the web. An iPad icon would be a sensible addition to any web designer’s resources toolbox, so let’s fire up Photoshop and create our very own detailed iPad icon graphic.
The icon we’ll be creating features the typical front view of the iPad. Using the Apple website for reference, let’s get started.
Create a new document, and use the Rounded Rectangle Tool to draw a portrait shape onto a new layer. Set the corner radius to 20px and the fill to white.
CMD-click on the layer thumbnail to load the selection, then go to Select > Modify > Contract and enter 3px. Create a new layer and fill this new selection with black.
Double click the first layer, with the white rectangle to open up the Layer Style options. Add a grey Inner Glow just 3px in size, with the blend mode of Normal.
Next, double click the black rectangle’s layer. This time add an Outer Glow using a lighter grey, also set to 3px in size and a blend mode of normal.
Use the Rectangular Marquee Tool to draw a thin 1px buttons on the top edge and side of the body to represent the lock and mute switches. Fill these with a subtle grey gradient.
To create the volume button, draw a thicker rectangle to begin with, then use the Elliptical Marquee Tool to delete out a central portion.
The main screen of the iPad often features a vibrant background wallpaper graphic. An amazing Creative Commons photo from Flickr user Arnar Valdimarsson fits pefectly. Use the marquee tool to crop down the photograph to the screen dimensions.
Drag a guide to identify the centre of the iPad body, then draw a circle with the Elliptical Marquee Tool. Fill this circle with a black to grey gradient to simulate the depth of the button.
On a new layer, use the Pencil tool in 1px size to draw a square, then delete out the four corners using the Eraser. Lower the opacity to around 25% to blend in the icon.
No Apple product would be complete without it’s reflections and light casts. CMD-click on the thumbnail of the main body to load the selection, then fill this with a white gradient spanning from the top right. Reduce the opacity of this layer to suit and move it to the top of the layer stack so that any underlying elements are affected by the light cast.
Onto the main iPad interface. Draw a thin selection across the top of the screen and fill with black to recreate the status bar. Lower the opacity to allow the background to show through.
Use the pencil tool to draw a simple battery icon, then add a simple selection of text elements.
Fill a rectangular selection with grey at the bottom of the screen, then press CMD-T to transform. Right click and select the Perspective option, then move the top corners inwards to create the basic shape of the iPad dock.
Double click the dock layer to add new Layer Styles. Add a gradient spanning from dark grey to light grey, then back to the dark grey. Set this to run horizontally across the dock.
Add an Inner Shadow to represent the tiny edge of the dock. Set the options to a light grey with the blend mode of normal. Use a -90 degree angle, a distance of 1px, a choke of around 27% and a size of 2px.
Use the Pen Tool to draw a smooth flowing shape across the dock. Complete the shape with rough points back to the start. Fill this with white and drop the opacity to around 13%.
CMD-click the dock layer to load the selection. Press CMD-Shift-I to inverse the selection, then delete out the excess from the dock reflection layer.
All the iPad interface now needs is a collection of icons. I found this fantastic set of Apple style icons from Deviant Art designer Ikon. Download a selection and begin laying out the icon grid on the iPad screen.
Add a Drop Shadow to one of the icons, using settings of around 50% opacity, 2px distance and 9px size. Right click the layer and Copy Layer Style, then Paste this style on the following icon layers.
Select the four dock icons and duplicate the layers. Press CMD-E to merge these layers together, then press CMD-T to transform. Right click and selection the option to flip vertically, then position into place as reflections. Add a layer mask and fade out the reflections with a soft brush or a gradient, then reduce the opacity to suit.
That’s the iPad icon complete. Don’t forget to add the obligatory surface reflection by copying the whole selection, then flip and position on the underside of the iPad body.
Does all that sound like too much hard work? Well you could always download my ready-made iPad icon set that I’ve posted for free download on Line25.com: Free Apple iPad Icon Set for Your Website Designs
Great work Chris, it’s cool to see the different outcome we both got from very almost the same tutorial! My ‘How to Design the Apple iPad in Photoshop’ tutorial has been quite successful so I hope yours is, too :)
Definitely! It was funny when I spotted yours just after scheduling this one up. Great work :-)
Haha, great minds think alike ;) I remember the ‘big round-up of tshirt stores’ I did for SM was also in your to-do list a couple of months back!
Nice work Chris. Don’t you think you forgot the usual screen reflection which appears on every apple product? :D
Very effective tutorial, as usual. Thanks
Ah you mean the old angled reflection that usually appears on the screens of the product shots? Would have fitted in nicely!
he he, very trendy these days, this iPad thingie :)
Nevertheless, good work Chris!
You’ve got to stay on top of these hot topics!
Great tutorial Chris, and it just goes to show how easy it is to create these things.
Still no idea why people would want an iPad though :P
I think the iPad would be great for sitting on the sofa and catching up on the news and so on. Sure it would have been better with a pen and Mac OS X, but I don’t think it’s intended to replace your computer – just be an addition to it.
I’d personally find it useful to download and read books – I’m running out of space to put mine, and in a way it’s a waste of paper!
I think that’s also how I’d use it. Something that would lay around the house as a mini entertainment station; browsing the web on the sofa, reading a book in bed etc
You’re clearly wrong… the iPad is a hilarious joke of a product. I had to check I wasn’t reading the Onion. In addition to your computer? It costs as much as a mid-range computer, and has much less functionality. Download and read books, running out of space? Dedicated ebook readers, much better for reading things on than glossy screens, still suck. No multitasking, too.
You’re talking about wasting paper? The iPad is a waste of glass, aluminum, and silicon.
It’s a hilarious product that’s a joke to call “revolutionary” — it’s a tablet without half the functionality most tablets have.
Awesome Work !!
Nice and simple and straight to the point. Thanks for sharing.
Little transparency for iPad dock would have made it better!!
Though the tutorial and final outcome is fantastic.
and yehhhh I have downloaded icons.
:)
Wow what an excellent tutorial…I loved it a lot and now with this I am going to design some different icons and then participate in a contest running by grafikguru.com
U rock)
I am suprised after the launch of the iPad how many time it took to make a greta tutorial about it.
good work :)
Very sleek. I love the outcome!
amazing tutorial, easy way to learn how create apple/ipod icons, i really like these of all steps. thanks
Great work Chris! Much appreciated.
This is a fantastic tutorial Chris. How long did this approximately take from start to finish? Seems like you have put some solid work into this.
This is why people keep coming back here. The quality of your tutorials are brilliant.
I can’t remember the exact length of time, but I got lost in the process! Thanks for your kind comments.
Great icon and tutorial.
I also did one for IconFinder (it was released before Steve Jobs’ keynote was finished :-D ): http://www.iconfinder.net/icondetails/43414/128/
Martin LeBlanc
Very nicely done. great !!!!!!!!!!!!!!! virtualchaitra
Wow…. Good…..
This tutorial is great, I learned new things. But I couldn’t do the step with the pen tool to create the shiny effect on the dock, just didnt work at all, I have CS2 though, I wonder if that was the problem.
Very well done although I don’t like the iPad at all :D
Very interesting tutorial! Thak you!
This was a good tutorial, I love it when I learn new things. I could do with out the step using the pen tool to create the shiny effect on the dock;other than that I think was a great post!
I love it! Very nice done and great job!
Looks great, nice tutorial!
Great Job Chris! Awesome way ..of
lifeapping .. ;)I am your fan i am iphone developer but i also like to do beta testing and designing for iphone loved your this tut u rock
Excellent tutorial in photoshop. Keep up your good work.
Very nice tutorial Chris, this is the best iPad one out of the few I have seen.
Very nice tutorial thank you !!
Hi Chris! Thanks for the great tutorial – as always. I read on the Apple site that the display specs are 1024-by-768-pixel resolution at 132 pixels per inch (ppi). Does this mean everything we design for the iPad needs to be at 132 ppi?